<!-- 插槽是子组件挖坑,父组件填坑 -->
<script>
import Content from './components/Content.vue'
export default {
  data() {
    return {
      message: "APP.VUE-helloworld",
    };
  },
  components: {
    Content,
    Content
},
};
</script>

<template>
  <div>

    <!-- 父组件填坑 -->
    <Content>
      <template v-slot:button>
        <!-- 作用域问题: 这里是显示父组件的message,不是子组件的 -->
        <button>按钮{{message}}</button>
      </template>

      <template v-slot:input>
        <input type="text">
      </template>

      <template v-slot:h3>
        <h3>123</h3>
      </template>
    </Content>

  <Content>
        <template #button>
          123
          <br>
        </template>

        <template #input>
          465
          <br>
        </template> 

        <template #h3>
          789
          <br>
        </template>
  </Content>

<!-- P38:作用域插槽,父组件从子组件中获取数据 -->
  
  <!-- <p>-----------</p>
  <Content v-slot="slotProps">
    {{ slotProps.text }} {{ slotProps.count }}
  </Content>

  
  <Content v-slot="{ text, count }">
    {{ text }} {{ count }}
  </Content> -->
  
  <!-- 作用域插槽:父组件替换插槽的标签,子组件提供插槽,但是数据是由子组件提供的 -->
  <Content v-slot:default="slotProps">
    <ul>
      <li v-for="item in slotProps.list" :key="item">
        {{item}}
      </li>
    </ul>
  </Content>
  <Content v-slot:default="slotProps">
    <ol>
      <li v-for="item in slotProps.list" :key="item">
        {{item}}
      </li>
    </ol>
  </Content>


  </div>
</template>

<style>
</style>
